<!--
 * @Author: Wushiqi
 * @Descripttion: 评论
 * @Date: 2020-10-15 21:43:05
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-19 23:13:32
-->
<template>
  <div class="comment">
    <p class="comment-title">
      <span>评论</span>
      <span>({{ dataLength }})</span>
    </p>
    <div class="comment-myinfo">
      <img v-if="myUser.user_img" :src="myUser.user_img" alt="">
      <img v-else src="@/assets/default_img.jpg" alt="">
      <input ref="postIpt" v-model="commentContent" type="text" placeholder="说点什么吧">
      <button @click="commentPublish">发表</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataLength: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      myUser: {},
      commentContent: ''
    }
  },
  created() {
    if (localStorage.getItem('token')) {
      this.myUserInfo()
    }
  },
  methods: {
    // 获取个人信息
    async myUserInfo() {
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      this.myUser = res.data[0]
    },
    commentPublish() {
      if (!this.myUser && !localStorage.getItem('token') && !localStorage.getItem('id')) {
        this.$msg.fail('请先登录')
        return
      }
      this.$emit('postComment', this.commentContent)
      this.commentContent = ''
    },
    // 输入框聚焦
    postIpt() {
      this.$refs.postIpt.focus()
    }
  }
}
</script>

<style scoped lang="scss">
.comment {
  padding: 8.333vw 2.778vw 0 2.778vw;
  .comment-title {
    span:nth-child(2) {
      color: #aaa;
      margin-left: 2.778vw;
    }
  }
  .comment-myinfo {
    padding: 2.778vw 0;
    display: flex;
    img {
      width: 7.222vw;
      height: 7.222vw;
      border-radius: 50%;
    }
    input {
      outline: none;
      border: 0;
      background-color: #f4f4f4;
      border-radius: 13px;
      padding: 0 4.167vw;
      margin-left: 2.778vw;
      font-size: 3.333vw;
    }
    button {
      outline: none;
      border: 0;
      border-radius: 3.333vw;
      background-color: #fb7299;
      color: white;
      font-size: 3.5vw;
      padding: 0 4.167vw;
    }
  }
}
</style>